<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .lunbo{
        width: 200px;
        height: 200px;
        margin: 0 auto;
        margin-top:  150px;
    }
        .lunbo img{
        width: 100%;
        height:100%;
        }
        #box {
            width: 200px;
            height: 100px;
            background-color: rgb(137, 137, 236);
            border: 1px solid rgb(79, 79, 238);
            font-size: 40px;
            font-family: "楷体";
            line-height: 100px;
            text-align: center;
            margin: 25px auto;
            border-radius: 10px;
        }
        span {
            display: block;
            width: 200px;
            height: 44px;
            line-height: 44px;
            background-color: rgb(84, 84, 128);
            border-radius: 10px;
            color: #fff;
            text-align: center;
            margin: 0 auto;
            font-size: 18px;
            font-family: 华文细黑;
        }
        span:hover {
            background-color: rgb(48, 48, 109);
        }
        .dakuang{
            width: 400px;
            height: 750px;
            border: 1px double white;
            background: url('img/手机框.jpeg') no-repeat;
            background-size:contain;
            margin: 0 auto;
        }
        .q{
            text-decoration:none;
        }
    </style>
    
</head>
<body>
    <div class="dakuang">
        <div class="lunbo">
            <img id="lunbo_img" src="img/img3.jpeg" >
        </div>
        <div id="box">随机点名</div>
        <a class="q" href="##"><span id="span">开始</span></a>
    </div>
</body>
<script>
    var arr = ["暴跳如雷","狼吞虎咽","见钱眼开","摇头晃脑","昂首挺胸","捧腹大笑","幸灾乐祸","梁祝", "渣渣辉", "麦当娜", "壁咚", "无所谓", "98K", "五步蛇", "女神经", "海草舞", "往后余生", "女汉子", "铁锤", "新婚之夜", "蓝瘦香菇", "指鹿为马", "隔壁泰山", "保温杯",
            "三个字", "贼眉鼠眼", "贞子", "荷尔蒙", "蹴鞠", "刘彻", "一轮OVER",
            "眉飞色舞","连蹦带跳","左顾右盼","嬉皮笑脸","愁眉苦脸","东倒西歪","蹑手蹑脚","喜出望外","垂头丧气",
            "贼眉鼠眼","牛头马面","虎头蛇尾","兔死狐悲","龙腾虎跃","狗急跳墙", ]
    var box = document.getElementById("box");
    var span = document.getElementById("span");
    var img = document.getElementById("lunbo_img");
    var S = 0;
    var t;
    var index = 1;
    span.onclick = function () {
        if (S == 0) {
            lunbo = setInterval(function(){
            index ++ ;
            if(index > 6){
                index = 1;
            }
            img.src = "img/img"+index+".jpeg";
        },10)
        t = setInterval(function () {
                var i = Math.round(Math.random() * (arr.length - 1));
                console.log(arr[i]);
                box.innerHTML = arr[i];
            }, 10)
            span.innerHTML = "结束"
            S = -1;
        }else{
            S = 0;
            clearInterval(lunbo);
            clearInterval(t);
            span.innerHTML = "开始"
        }
    }
</script>

</html>